<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三行两列布局</title>
    <style>
        /*
        justify-content

            space-between   距离相等依次排开
            space-around    距离相等依次排开包括左右两边
            flex-start      左对齐 flex-end右对齐
            center          居中
        */
        .flex-container {
            display: flex; /*设置弹性盒子模型*/
            flex-direction: row; /*类似线性布局,水平显示*/
            flex-wrap: wrap; /*超出的部分换行*/
            width: 1200px;
            height: 240px;
            background-color: lightsteelblue;
            align-items: center; /*内容垂直居中  上下居中*/
            justify-content: space-between;
        }

        .flex-container .flex-item {
            width: 30px;
            height: 80px;
            margin: 10px;
            background-color: lightsalmon;
        }

        .flex-container .one {
            width: 50px;
            height: 90px;
        }

        .flex-container .two {
            width: 60px;
            height: 100px;
        }

        .flex-container .three {
            font-size: 28px;
            width: 300px;
            height: 130px;
        }

        .flex-container .four {
            font-size: 28px;
            width: 260px;
            height: 130px;
        }

    </style>
</head>
<body>
<div class="flex-container">
    <div class="flex-item one">1111</div>
    <div class="flex-item two">2222</div>
    <div class="flex-item three">3333</div>
    <div class="flex-item four">4444</div>
</div>

<a href="https://www.jianshu.com/p/5856c4ae91f2" target="_blank">参考文献1</a>
<br/>
<a href="https://www.jianshu.com/p/dd127da6e4b8"  target="_blank">参考文献2</a>
</body>
</html>